<template>
  <div>
    <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
      全选
    </el-checkbox>
    <el-form label-width="140px" :model="formData" size="mini">
      <el-row>
        <el-col
          :span="24"
          style="background: #c9d2ca; text-align: left; padding: 5px; margin-bottom: 5px"
        >
          固定列
        </el-col>
      </el-row>
      <el-row>
        <!-- PartNumber -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsPartNumber">PartNumber</el-checkbox>
        </el-col>
        <!-- PartName -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsPartName">PartName</el-checkbox>
        </el-col>
        <!--MaterialDetail  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsMaterialDetail">
            MaterialDetail
          </el-checkbox>
        </el-col>
      </el-row>
      <el-row>
        <el-col
          :span="24"
          style="background: #c9d2ca; text-align: left; padding: 5px; margin-bottom: 5px"
        >
          Header
        </el-col>
      </el-row>
      <el-row>
        <!--ItemNo  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsItemNo">ItemNo</el-checkbox>
        </el-col>
        <!-- DpPrice -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsDpPrice">DP Price</el-checkbox>
        </el-col>
        <!--Qty  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsQty">
            Qty
          </el-checkbox>
        </el-col>
        <!--Size  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsSize">
            Size
          </el-checkbox>
        </el-col>
        <!--Size  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsSolution">
            Solution
          </el-checkbox>
        </el-col>
        <!--IdProcess  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsIdProcess">
            IdProcess
          </el-checkbox>
        </el-col>
        <!--Owner  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsOwner">
            Owner
          </el-checkbox>
        </el-col>
        <!--Vendor1  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsVendor1">
            Vendor1
          </el-checkbox>
        </el-col>
        <!--Vendor2  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsVendor2">
            Vendor2
          </el-checkbox>
        </el-col>
        <!--Vendor3  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsVendor3">
            Vendor3
          </el-checkbox>
        </el-col>
        <!--Vendor4  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsVendor4">
            Vendor4
          </el-checkbox>
        </el-col>
        <!--Vendor5  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsVendor5">
            Vendor5
          </el-checkbox>
        </el-col>
        <!--Category  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsCategory">
            Category
          </el-checkbox>
        </el-col>
        <!--Commodity  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsCommodity">
            Commodity
          </el-checkbox>
        </el-col>
        <!--GcmOwner  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsGcmOwner">
            GcmOwner
          </el-checkbox>
        </el-col>
        <!--RdFunction  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsRdFunction">
            RdFunction
          </el-checkbox>
        </el-col>
        <!--GcmFunction  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsGcmFunction">
            GcmFunction
          </el-checkbox>
        </el-col>
        <!--ToolingCave  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsToolingCave">
            ToolingCave
          </el-checkbox>
        </el-col>
        <!--Weight  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsWeight">
            Weight
          </el-checkbox>
        </el-col>
        <!--Cost  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsCost">
            Cost
          </el-checkbox>
        </el-col>
        <!--TrackingOption  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsTrackingOption">
            TrackingOption
          </el-checkbox>
        </el-col>
      </el-row>
    </el-form>

    <span style="display: block;text-align: center;margin-top: 5px">
      <!--取消按钮-->
      <el-button size="medium" @click="cancel">{{ $t('button.cancel') }}</el-button>
      <!--保存按钮-->
      <el-button size="medium" type="primary" @click="save">
        {{ $t('button.save') }}
      </el-button>
    </span>
  </div>
</template>

<script>
export default {
  name: 'RfqCellShowSet',
  components: {},
  props: {
    pageId: {
      type: String
    },
    cellIsShow: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      formData: {},
      // 控制全选状态的复选框
      checkAll: false,
      isIndeterminate: true
    }
  },
  computed: {
    // 判断pageId展示不同的选项
    showDiffOptionsByPageId() {
      return !(this.pageId && this.pageId === 'FdDataView')
    },
    // 部分页面GCM控制开关关闭
    isGcmEdit() {
      return !(this.pageId && this.pageId === ('FdAssignPane' || 'FdFocalPane'))
    }
  },
  watch: {
    // 监听formData的值控制 全选状态的展示
    formData: {
      handler() {
        const value = Array.from(new Set(Object.values(this.formData)))
        if (value && value.length > 1) {
          // 只要有两个值状态就是不确定
          this.isIndeterminate = true
        } else {
          if (value[0] === true) {
            this.checkAll = true
            this.isIndeterminate = false
          } else {
            this.checkAll = this.isIndeterminate = false
          }
        }
      },
      deep: true
    }
  },
  created() {
    this.formData = this.$deepCopy(this.cellIsShow)
  },
  mounted() {},
  methods: {
    handleCheckAllChange(val) {
      for (const key in this.formData) {
        this.formData[key] = val
      }
    },

    save() {
      // const data = this.formData
      console.log(this.formData)
      // if (data.IsFixBasePartName && data.IsBasePartName) {
      //   data.IsBasePartName = false
      // }
      // if (data.IsFixBasePartNo && data.IsBasePartNo) {
      //   data.IsBasePartNo = false
      // }
      // if (data.IsFixNewPartName && data.IsNewPartName) {
      //   data.IsNewPartName = false
      // }
      // if (data.IsFixNewPartNo && data.IsNewPartNo) {
      //   data.IsNewPartNo = false
      // }
      this.$emit('saveOperationData', this.formData)
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>
